<template>
    <div
    :title="dataSource.name"
    @click='handleSelect(dataSource)'
    :class="{ 'window':true,'window-active':dataSource.id === selected}"
    @contextmenu.stop="">
        <windowHeader 
        :value="dataSource"
        @zoom="handleZoom"
        @hide="handleHide"
        @close="handleClose">
        </windowHeader>
        <div style="padding: 6px;height: calc(100% - 40px);">
            <div
            class="full-layout-1 scrollbar"
            v-loading="loading">
               <iframe 
                target="_self"
                id="iframe"
                :src="dataSource.link"
                :name='dataSource.name' 
                frameborder='0'
                @load="handleIframeLoad"
                scrolling='yes'>
                </iframe>
                <div style="height: 100%; width: 100%; display: none; position: absolute;"></div>
            </div> 
        </div>
    </div>
</template>

<script lang="ts">
import { reactive, toRefs, defineComponent } from 'vue';
import windowHeader from '@/components/window/windowHeader.vue';
export default defineComponent({
    name: 'iframeWindow',
    components: {
        windowHeader
    },
    props: {
        dataSource: {
            type:Object,
            default:null
        },
        selected: {
            type:String,
            default:''
        },
        loading: {
            type:Boolean,
            default:true
        }
    },
    emits: ['select', 'load', 'zoom',  'close', 'hide'],
    setup (props, context) 
    {
        let methods = {
            handleSelect (value)
            {
                context.emit('select', value);
            },
            handleIframeLoad ()
            {
                context.emit('load');
            },
            handleZoom (value)
            {
                context.emit('zoom', value);
            },
            handleClose (value)
            {
                context.emit('close', value);
            },
            handleHide (value)
            {
                context.emit('hide', value);
            }
        };

        return {
            ...methods
        };
    }
});

</script>
<style lang='scss' scoped>
.window {
    position: absolute;
    height: 70%;
    width: 50%;
    border-radius: 5px;
    z-index: 999;
    background-color: $PageBackgroundColor;
    overflow: hidden;
    top: 10%;
    left: 25%;
    box-shadow: 0px 0px 1px 2px $ShadowColor;
    min-width: 260px;
    min-height: 300px;

}
:deep(.el-loading-mask) {
    top: 70px;
}

.full-layout-1 {
    height: 100%;
    // padding-top: 2px;
    position: relative;
}

.window-active {
    z-index: 2000 !important;
}

#iframe {
    position: absolute;
    height: 100%;
    width: 100%;
}
</style>
